<script setup>
import { ref, watch, nextTick } from "vue";
import { useRouter } from "vue-router";
import MaterialButton from "@/components/MaterialButton.vue";
import CenteredBlogCard from "./CenteredBlogCard.vue";

import vueMkHeader from "@/assets/img/products/badlands/bg.png";
import bottom from "@/assets/img/products/badlands/bottom.png";
import tire from "@/assets/img/products/badlands/tire.png";
import tireImg from "@/assets/img/home/tires/defaultTire.png";
import bg1 from "@/assets/img/products/bg1.png";
import bg2 from "@/assets/img/products/bg2.png";

import { listPage, goodsInfo, getTiresType } from "@/api/tires";
const props = defineProps({
    positionIndex: {
        type: Number,
    },
});
const router = useRouter();

let list = ref([]);
let typeObj = ref({});
let resObj = ref({});
getTiresType().then((res) => {
    res.data.forEach((item) => {
        typeObj.value[item.dictValue] = item.dictLabel;
    });
});
listPage({ pageNum: 1, pageSize: 999 }).then((res) => {
    console.log(res);
    let list = [];
    res.data.records.forEach((item) => {
        list.push({
            name: item.productName,
            id: item.id,
            image: item.productPic ? item.productPic.split(",")[0] : tireImg,
            type: item.tiresType,
        });
    });
    let result = list.reduce((a, b) => {
        if (a[b.type]) {
            //根据old分类
            a[b.type].push(b);
        } else {
            a[b.type] = [b];
        }
        return a;
    }, {});
    resObj.value = result;
    getInfo(list[0].id);
});
let tiresDesc = ref("");
let activeId = ref("");
let productPic = ref("");
const goodItem = ref({});
const change = (id) => {
    activeId.value = id;
};
const getInfo = (id) => {
    id &&
        goodsInfo(id).then((res) => {
            goodItem.value = res.data;
            if (goodItem.value.tiresDesc) {
                if (goodItem.value.tiresDesc.indexOf("==") > -1) {
                    tiresDesc.value = goodItem.value.tiresDesc.split("==")[0];
                } else {
                    tiresDesc.value = goodItem.value.tiresDesc;
                }
            } else {
                tiresDesc.value = "";
            }
            if (goodItem.value.productPic) {
                if (goodItem.value.productPic.indexOf(",") > -1) {
                    productPic.value = goodItem.value.productPic.split(",")[0];
                } else {
                    productPic.value = goodItem.value.productPic;
                }
            } else {
                productPic.value = tireImg;
            }
        });
};
const scrollIntoView1 = () => {
    document.getElementById("Position1").scrollIntoView({ behavior: "smooth" });
};
const scrollIntoView2 = () => {
    document.getElementById("Position2").scrollIntoView({ behavior: "smooth" });
};
watch(
    () => activeId.value,
    (newRouterName, oldValue) => {
        if (newRouterName && newRouterName != oldValue) {
            getInfo(newRouterName);
        }
    },
    { immediate: true }
);
watch(
    () => router.currentRoute.value.query.posId,
    (value) => {
        setTimeout(() => {
            if (value == 2) {
                scrollIntoView1();
            } else if (value == 3) {
                scrollIntoView2();
            }
        }, 2000);
    },
    { immediate: true }
);
</script>
<template>
    <div class="pt-6 pb-2" :style="`background: url(${vueMkHeader});no-repeat top / contain`" loading="lazy">
        <!-- <div class="container pb-2 px-6 mb-8" :style="`background: url(${bottom}) no-repeat bottom / contain;width:100%`">
            <div class="row align-items-end">
                <div class="col-lg-6 text-center">
                    <img class="pb-5" :src="productPic" alt="" style="width: 60%" />
                </div>
                <div class="col-lg-6 ps-6 pb-6">
                    <h1 class="text-danger text-f-ERASBD">{{ goodItem.productName }}</h1>
                    <div class="text-grey-1 mt-5 mb-5">{{ tiresDesc }}...</div>
                    <MaterialButton class="w-auto mt-6 bg-red" @click="router.push(`/detail?id=${goodItem.id}`)">LEARN MORE</MaterialButton>
                </div>
            </div>
        </div> -->
        <div class="container pb-6">
            <div class="row">
                <div class="col-lg-3" v-for="(item, index) in resObj[1]" :key="index">
                    <CenteredBlogCard style="height: 100%; cursor: pointer" :image="item.image" :title="item.name" :description="typeObj[item.type] || ''" :activeId="item.id" @mouseenter="change(item.id)" @click="router.push(`/detail?id=${item.id}`)" />
                </div>
            </div>
        </div>
    </div>
    <div id="Position1" class="page-header" :style="`background-image: url(${bg1});`" loading="lazy">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 text-center mx-auto text-white">
                    <div class="border-text title1 uppercase">COMMERCIAL TRUCK TIRES</div>
                    <p class="desc mt-3 text-f-Montserrat-Regular px-4">Meeting the demands of heavy-duty work, these commercial options offer durability and dependable traction across on-road and off-road conditions. With designs that support productivity and safety, each tire is built to keep your fleet running smoothly, mile after mile.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="pt-6" :style="`background: url(${vueMkHeader});no-repeat top / contain`" loading="lazy">
        <div class="container pb-6">
            <div class="row">
                <div class="col-lg-3" v-for="(item, index) in resObj[2]" :key="index">
                    <CenteredBlogCard style="height: 100%; cursor: pointer" :image="item.image" :title="item.name" :description="typeObj[item.type] || ''" :activeId="item.id" @mouseenter="change(item.id)" @click="router.push(`/detail?id=${item.id}`)" />
                </div>
            </div>
        </div>
    </div>
    <div id="Position2" class="page-header" :style="`background: url(${bg2}) no-repeat  bottom / cover`" loading="lazy">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 text-white">
                    <div class="border-text title2 uppercase">SPECIALTY TRAILER TIRES</div>
                    <p class="desc mt-3 text-f-Montserrat-Regular">Designed for stability and strength, these trailer tires provide reliable performance for every towing need. Engineered for load-bearing stability, they bring peace of mind whether on highways or rugged trails.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="pt-6" :style="`background: url(${vueMkHeader});no-repeat top / contain`" loading="lazy">
        <div class="container pb-6">
            <div class="row">
                <div class="col-lg-3" v-for="(item, index) in resObj[3]" :key="index">
                    <CenteredBlogCard style="height: 100%; cursor: pointer" :image="item.image" :title="item.name" :description="typeObj[item.type] || ''" :activeId="item.id" @mouseenter="change(item.id)" @click="router.push(`/detail?id=${item.id}`)" />
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
/* .header-height {
    min-height: 100vh !important;
}
@media (max-width: 1000px) {
    .header-height {
        min-height: 40vh !important;
    }
} */
.iconImg {
    margin-right: 1rem;
}
.col-lg-3 {
    margin: 2rem 0;
    padding: 0 1.5rem;
}
.page-header {
    min-height: 100vh !important;
}
@media (max-width: 991.98px) {
    .border-text {
        font-size: 2.2rem;
        line-height: 2.4rem;
    }
    .col-lg-3 {
        margin: 1rem 0;
        padding: 0 0.5rem;
        flex: 0 0 auto;
        width: 50%;
    }
    .page-header {
        min-height: 560px !important;
        height: 560px;
    }
    .desc {
        display: none;
    }
    .text-center {
        text-align: end !important;
    }
    .title1 {
        margin-bottom: 6rem;
    }
    .title2 {
        margin-bottom: 6rem;
    }
}
@media (min-width: 991.99px) {
    .border-text {
        font-size: 4rem;
    }
    #Position1.page-header {
        align-items: unset !important;
        padding-top: 10%;
    }
    .desc {
        display: block;
    }
}
</style>
